<template>
  <cu-layout title="门店列表">
    <view class="p-10">
      <view v-for="(item, i) in state.list" :key="i" class="cu-card flex-a" :class="shopId === item.id ? 'active' : ''" @click="onSelect(item.id)">
        <view class="flex-1 leading-18 hair-r pr-20">
          <view class="text-15 font-600 leading-22">{{ item.name }}</view>
          <view class="my-6 flex">
            <view class="iconfont icon-zuobiaofill text-light text-12 mr-5" />
            <view class="text-tips text-12">{{ item.address }}</view>
          </view>
          <view class="flex">
            <view class="iconfont icon-shizhongfill text-light text-12 mr-5" />
            <view class="text-tips text-12">{{ item.business_hours }}</view>
          </view>
        </view>
        <view class="flex-shrink pl-10 flex-c w-80">
          <view class="">
            <view class="text-primary text-13">进店选购</view>
            <view class="text-tips text-12 my-6">{{ item.distance }}</view>
            <view class="flex">
              <view class="tag flex-ca mr-16" @click="$.utils.telCall(item.phone)"><view class="iconfont icon-phone-fill text-12 " /></view>
              <view class="tag flex-ca" @click="$.utils.openLocation({latitude: item.lat, longitude: item.lng,name: item.name,address: item.address})"><view class="iconfont icon-zuobiaofill text-12 " /></view>
            </view>
          </view>
        </view>
        <view class="active-icon">
          <text class="iconfont icon-xuanze" />
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script setup>
import { reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import $ from '@/sheep'
const useShop = $.store('shop')
const shopId = computed(() => useShop.shopId)
const state = reactive({
  list: []
})
onLoad(async() => {
  $.get('/Store/shop').then(res => {
    state.list = res.data
  })
})

async function onSelect(id) {
  await useShop.init({ id })
  $.router.reLaunch('/pages/index/index')
}
</script>

<style lang="scss">
.cu-card {
	border: 1rpx solid #fff;
	&.active {
		position: relative;
		border-color: $u-primary;
		overflow: hidden;
		.active-icon {
			display: block;
		}
		&::after {
			content: '';
			position: absolute;
			right: 0;
			bottom: 0;
			width: 0;
			height: 0;
			border-color: $u-primary transparent; /*上下颜色 左右颜色*/
			border-width:  0 0 60rpx 70rpx;
			border-style: solid;
		}
	}
	.active-icon {
		display: none;
		position: absolute;
		right: 4rpx;
		bottom: 0;
		line-height: 40rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #fff;
		z-index: 2;
	}
	.tag {
		width: 32rpx;
		height: 32rpx;
		border: 1rpx solid #c6e2ff;
		border-radius: 50%;
		color: $u-primary;
		background: #ecf5ff;
	}
}

</style>
